{% extends 'app01/base.html' %}


                {% block search_left_nav %}
                <li><a href="{% url 'projectManage:project_manage' %}">项目管理 <span class="sr-only">(current)</span></a>
                </li>
                <li class="active"><a href="{% url 'app01:index' %}">用例管理</a>
                     <ul class="nav-pills nav-stacked" style="list-style-type: none; display: block;">
                        <li><a href="{% url 'app01:index' %}">用例展示</a></li>
                        <li><a href="{% url 'app01:new_page' %}">新增页面用例管理</a></li>
                        <li><a href="{% url 'app01:edit_page' %}">编辑页面用例管理</a></li>
                        <li><a href="#">删除页面用例管理</a></li>
                        <li><a href="#">查询页面用例管理</a></li>
                        <li><a href="#">导入页面用例管理</a></li>
                        <li><a href="#">导出页面用例管理</a></li>
                    </ul>
                </li>
                <li><a href="{% url 'caseTemplate:case_template' %}">配置用例模板管理</a></li>
                <li><a href="{% url 'caseReportManage:userManage' %}">用例报告管理</a></li>
                <li><a href="{% url 'userManage:userManage' %}">用户管理</a></li>
                {% endblock search_left_nav %}
            </ul>
        </div>
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                {% block left_nav %}
                <li><a href="{% url 'projectManage:project_manage' %}">项目管理 <span class="sr-only">(current)</span></a>
                </li>
                <li class="active"><a href="{% url 'app01:index' %}">用例管理</a>
                     <ul class="nav-pills nav-stacked" style="list-style-type: none; display: block;">
                        <li><a href="{% url 'app01:index' %}">用例展示</a></li>
                        <li><a href="{% url 'app01:new_page' %}">新增页面用例管理</a></li>
                        <li><a href="{% url 'app01:edit_page' %}">编辑页面用例管理</a></li>
                        <li><a href="#">删除页面用例管理</a></li>
                        <li><a href="#">查询页面用例管理</a></li>
                        <li><a href="#">导入页面用例管理</a></li>
                        <li><a href="#">导出页面用例管理</a></li>
                    </ul>
                </li>
                <li><a href="{% url 'caseTemplate:case_template' %}">配置用例模板管理</a></li>
                <li><a href="{% url 'caseReportManage:userManage' %}">用例报告管理</a></li>
                <li><a href="{% url 'userManage:userManage' %}">用户管理</a></li>
                {% endblock left_nav %}
            </ul>
        </div>
<div style="padding-left: 2px; padding-right: 2px"
             class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h4 class="sub-header left">{% block search_sub_header %}新增页面用例管理{% endblock search_sub_header %}</h4>
        <div class="table-responsive">
            <div>
                <form class="form-inline" action="{% url 'app01:search_case' %}" id="form_Condition" method="get">
                    {% csrf_token %}
                    <label for="startTime">创建起始：</label>
                    <input type="date" class="form-control input-sm" id="start_date" value="{{ start_date }}" name="start_date"
                           style="width: 165px;margin-right: 5px">
                    <label for="endTime">创建结束：</label>
                    <input type="date" class="form-control input-sm" value="{{ end_date }}" id="end_date" name="end_date"
                           style="width: 165px;margin-right: 5px">
                    <label for="case_title">用例标题：</label>
                    <input class="form-control" id="case_title" value="{{ case_title }}" name="case_title" style="width: 120px;margin-right: 5px">
                    <br/>
                    <br/>
                    <div class="btn-group">
                        <button type="button" class="btn btn-secondary btn-sm" id="btn_Clear" onclick="function back_to_index() {
                            window.location.href='{% url "app01:index" %}';
                        }
                        back_to_index()">清空
                        </button>
                        <button type="submit" class="btn btn-info btn-sm" id="btn_Search">查询
                        </button>
                    </div>
                </form>
            </div>
            <br/>
            <div class="btn-group" role="group" aria-label="Basic example">
                <button type="button" data-toggle="modal" data-target="#GenerateModal" class="btn btn-primary">用例生成
                </button>
                <button type="button" class="btn btn-primary" disabled>批量编辑</button>
                <button type="button" class="btn btn-primary" disabled>批量删除</button>
                <button type="button" data-toggle="modal" data-target="#createCaseModal" class="btn btn-primary">新增
                </button>
                <button type="button" class="btn btn-primary">导出</button>
            </div>
            <div>
                <table class="table table-striped table-bordered">
                    <thead>
                    <tr>
                        <th style="width: 10px"><input type="checkbox"></th>
                        <th style="width: 50px">序号</th>
                        <th>用例标题</th>
                        <th>前置条件</th>
                        <th>用例步骤</th>
                        <th>创建人</th>
                        <th>创建时间</th>
                        <th>用例等级</th>
                        <th>预期结果</th>
                        <th>实际结果</th>
                        <th>备注</th>
                        <th hidden="hidden">ID</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for case in pages %}
                        <tr style="font-size: 10px">
                            <td><input type="checkbox" value="{{ case.id }}"></td>
                            <td>{{ forloop.counter }}</td>
                            <td>{{ case.title }}</td>
                            <td>{{ case.pre_condition }}</td>
                            <td style="WORD-BREAK: break-all; WORD-WRAP: break-word">{{ case.case_steps }}</td>
                            <td>{{ case.creator }}</td>
                            <td>{{ case.create_time|date:'Y-m-d H:i' }}</td>
                            <td>{{ case.case_level }}</td>
                            <td>{{ case.expect_result }}</td>
                            <td>{{ case.real_result }}</td>
                            <td>{{ case.remarks }}</td>
                            <td hidden="hidden">{{ case.id }}</td>
                            <td>
                                <button data-toggle="modal" data-target=".bs-example-modal-lg"
                                        onclick="showDialog(this)">修改
                                </button>
                                <a href="" onclick="confirm('确定删除吗?')">删除</a>
                            </td>
                        </tr>

                    {% endfor %}
                    </tbody>
                </table>
                <script>
                    function showDialog(obj) {
                        $('#EditModal').modal('show');
                        var tds = $(obj).parent().parent().find('td');
                        $(".case_title").val($(tds.eq(2)).text());
                        $(".pre_condition").val($(tds.eq(3)).text());
                        $(".case_steps").val($(tds.eq(4)).text());
                        $(".creator").val($(tds.eq(5)).text());
                        var create_time = $(tds.eq(6).text()).selector
                        var create_time1 = create_time.split(' ').join('T')
                        $(".create_time").val(create_time1);
                        console.log(create_time1)
                        $(".level").val($(tds.eq(7)).text());
                        $(".expect_result").val($(tds.eq(8)).text());
                        $(".real_result").val($(tds.eq(9)).text());
                        $(".remarks").val($(tds.eq(10)).text());
                        $(".case_id").val($(tds.eq(11)).text());
                    }
                </script>
                <div class="modal fade" id="GenerateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                     aria-hidden="true">
                    <div class="modal-dialog" style="width: 770px">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
                                </button>
                                <h4 class="modal-title" id="GenerateModalLabel">用例生成</h4>
                            </div>
                            <form class="form-inline" action="{% url 'app01:edit_case' %}" method="post">
{#                                <div class="modal-body" style="height: 360px">#}
                                <div style="height: 360px">
                                    <iframe id="iframe_generate" src="../../static/app01/newRow.html" width="768px" height="360px"></iframe>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
{#                                    <button type="submit" class="btn btn-primary">提交</button>#}
                                </div>
                            </form>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal -->
                </div>
                <div class="modal fade" id="EditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                     aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
                                </button>
                                <h4 class="modal-title" id="EditModalLabel">用例修改</h4>
                            </div>
                            <form class="form-inline" action="{% url 'app01:edit_case' %}" method="post">
                                {% csrf_token %}
                                <div class="modal-body">
                                    <label style="width: 70px" for="case_id">ID：</label>
                                    <input name="case_id" class="form-control input_for_modal case_id" type="text"
                                           id="case_id" readonly>
                                    <label for="case_title">用例标题：</label>
                                    <input name="case_title" class="form-control input_for_modal case_title" type="text"
                                           id="case_title" required>
                                    <label for="pre_condition">预置条件：</label>
                                    <input name="pre_condition" class="form-control input_for_modal pre_condition"
                                           type="text" id="pre_condition">
                                    <label for="case_steps">用例步骤：</label>
                                    <input name="case_steps" class="form-control input_for_modal case_steps" type="text"
                                           id="case_steps">
                                    <label style="width: 70px" for="creator">创建人：</label>
                                    <input name="creator" class="form-control input_for_modal creator" type="text"
                                           id="creator">
                                    <label style="width: 70px" for="create_time">创建时间：</label>
                                    <input name="create_time" class="form-control input_for_modal create_time"
                                           type="datetime-local" id="create_time">
                                    <label for="level">用例等级：</label>
                                    <input name="level" class="form-control input_for_modal level" type="text"
                                           id="level">
                                    <label for="expect_result">预期结果：</label>
                                    <input name="expect_result" class="form-control input_for_modal expect_result"
                                           type="text" id="expect_result">
                                    <label for="real_result">实际结果：</label>
                                    <input name="real_result" class="form-control input_for_modal real_result"
                                           type="text" id="real_result">
                                    <label style="width: 70px" for="remarks">备注：</label>
                                    <input name="remarks" class="form-control input_for_modal remarks" type="text"
                                           id="remarks">
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                    <button type="submit" class="btn btn-primary">提交</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="createCaseModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                     aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
                                </button>
                                <h4 class="modal-title" id="myModalLabel">用例新增</h4>
                            </div>
                            <form class="form-inline" action="{% url 'app01:create_case' %}" method="post">
                                {% csrf_token %}
                                <div class="modal-body">
                                    <label for="case_title">用例标题：</label>
                                    <input name="case_title" class="form-control input_for_modal" type="text"
                                           id="case_title" required>
                                    <label for="pre_condition">预置条件：</label>
                                    <input name="pre_condition" class="form-control input_for_modal" type="text"
                                           id="pre_condition">
                                    <label for="case_steps">用例步骤：</label>
                                    <input name="case_steps" class="form-control input_for_modal" type="text"
                                           id="case_steps">
                                    <label style="width: 70px" for="creator">创建人：</label>
                                    <input name="creator" class="form-control input_for_modal" type="text" id="creator">
                                    <label for="level">用例等级：</label>
                                    <input name="level" class="form-control input_for_modal" type="text" id="level">
                                    <label for="expect_result">预期结果：</label>
                                    <input name="expect_result" class="form-control input_for_modal" type="text"
                                           id="expect_result">
                                    <label style="width: 70px" for="remarks">备注：</label>
                                    <input name="remarks" class="form-control input_for_modal" type="text" id="remarks">
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                    <button type="submit" class="btn btn-primary">提交</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div style="float: right;">
                <ul class="pagination">
                    <li class="page-item">
                        {% if pages.has_previous %}
                            <a href="{% url 'app01:search_case' %}?current_page={{ pages.previous_page_number }}&start_date={{ start_date }}&end_date={{ end_date }}&case_title={{ case_title }}">上一页</a>{% endif %}
                    </li>
                    {% for page in pages.paginator.page_range %}
                        {% if pages.number == page %}
                            <li class="page-item">
                                <a style="background: lightblue" class="page-link"
                                   href="{% url 'app01:search_case' %}?current_page={{ page }}&start_date={{ start_date }}&end_date={{ end_date }}&case_title={{ case_title }}">{{ page }}</a></li>
                        {% elif pages.number|add:'-1' == page or pages.number|add:'1' == page %}
                            <li class="page-item">
                                <a class="page-link"
                                   href="{% url 'app01:search_case' %}?current_page={{ page }}&start_date={{ start_date }}&end_date={{ end_date }}&case_title={{ case_title }}">{{ page }}</a>
                            </li>
                        {% endif %}
                    {% endfor %}
                    <li class="page-item">
                        {% if pages.has_next %}
                            <a class="page-link"
                               href="{% url 'app01:search_case' %}?current_page={{ pages.next_page_number }}&start_date={{ start_date }}&end_date={{ end_date }}&case_title={{ case_title }}">下一页</a>
                        {% endif %}
                    </li>
                </ul>
            </div>

        </div>
    </div>
    </div>
</div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.35/assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.35/dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.35/assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.35/assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
